<template>
  <div class="edit-cover-layer" :class="{hidden:!showCover}">
    <div class="ctrl-bar">
      <span
        class="btn"
        :style="{backgroundImage:`url('${closeIco}')`}"
        @click="handleCencel"
      ></span>
      <span
        class="btn"
        :style="{backgroundImage:`url('${confirmIco}')`}"
        @click="handleClick"
      ></span>
    </div>
    <input
      type="text"
      class="cover-input"
      :class="{hidden:editingType!=='nickname'}"
      v-model="nicknameData"
      placeholder="昵称"
      maxlength="12"
    />
    <input
      type="text"
      class="cover-input"
      :class="{hidden:editingType!=='email'}"
      v-model="emailData"
      placeholder="邮箱"
      maxlength="20"
    />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import closeIco from '@/assets/icons/close.png'
import confirmIco from '@/assets/icons/confirm.png'

export default {
  name: 'edit-cover-layer',
  props: ['showCover', 'editingType', 'handleCencel', 'handleConfirm'],
  data: () => ({
    nicknameData: 'asasd',
    emailData: 'dwwd',
    closeIco,
    confirmIco
  }),
  computed: { ...mapState('User', ['nickname', 'email']) },
  methods: {
    ...mapActions('User', ['updateUser', 'logout']),
    ...mapActions('Toast', ['addToast']),
    handleClick() {
      this.handleConfirm(this[`${this.editingType}Data`])
    }
  },

  watch: {
    showCover() {
      // 此处是为了在修改之前,先将数据设置为原始的数据,在生命周期中无法多次触发
      this.nicknameData = this.nickname
      this.emailData = this.email
    }
  }
}
</script>

<style lang="stylus">
$input-size = 20px;
$button-size = 40px;

.edit-cover-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  transition: all 0.25s;

  &.hidden {
    visibility: hidden;
    opacity: 0;
  }
}

.ctrl-bar {
  display: flex;
  justify-content: space-between;

  .btn {
    width: $button-size;
    height: $button-size;
    background: center / 80% no-repeat;
  }
}

.cover-input {
  display: block;
  width: 80%;
  margin: 20px auto 0;
  padding: 0.25 * $input-size 0.75 * $input-size;
  line-height: $input-size;
  font-size: 16px;
  border: none;
  outline: none;
  border-radius: $input-size;
  background-color: $app-bgc;
  box-sizing: border-box;

  &.hidden {
    display: none;
  }
}
</style>
